<template>
  <div class="kw-button-group">
      <kw-button v-for="(item, index) in buttonList" 
        :type="val === item[valueProp]? type: 'default'" :key="index" 
        @on-click="handlerItemClick(item)">
          {{item[labelProp]}}
      </kw-button>
  </div>
</template>

<script>
export default {
    name: 'kw-button-group',
    model: {
        prop: 'value',
        event: 'on-change'
    },
    props: {
        valueProp: {
            type: String,
            default: 'value'
        },
        labelProp: {
            type: String,
            default: 'label'
        },
        buttonList: {
            type: Array,
            default: () => {
                return []
            }
        },
        value: {
            type: [String, Number]
        },
        type: {
            type: String,
            default: 'blue'
        }
    },
    data() {
        return {
            val: this.value
        }
    },
    watch: {
        value(v) {
            this.val = v
        }
    },
    methods: {
        handlerItemClick(item) {
            if (item[this.valueProp] !== this.val) {
                this.val = item[this.valueProp]
                this.$emit('on-change', this.val)
            }
        }
    }
}
</script>

<style lang="less">
    .kw-button-group {
        display: inline-flex;
        vertical-align: middle;
        border-left: none;
        .kw-button {
            padding: .5rem;
            margin: 0;
            &:not(:last-child) {
                border-right: 1px solid #DCDFE6;
            }
        }
    }
</style>